<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      h1 {
        width: 100%;
        height: 80px;
        text-align: center;
        line-height: 80px;
        background-color: #434a50;
        color: #ffd04b;
      }
      .wrap {
        width: 500px;
        height: 300px;
        margin: 100px auto;
        border: 2px solid #cecece;
        display: flex;
        flex-direction: column;
      }
      .wrap > p {
        display: flex;
        justify-content: space-around;
        margin: 30px auto;
      }
      .wrap > p > button {
        margin: 0 100px;
      }
    </style>
  </head>
  <body>
    <h1>文章发布</h1>
    <div class="wrap">
      <p><span>文章标题</span><input type="text" id="title" /></p>
      <p><span>是否公开</span><input type="checkbox" id="status" /></p>
      <p><span>内容</span><input type="textarea" id="content" /></p>
      <p>
        <button onclick="PushFn()">发布</button
        ><button onclick="resetFn()">重置</button>
      </p>
    </div>
  </body>
  <script type="module">
    import http from "./request.js";
    window.PushFn = function () {
      let title = document.querySelector("#title").value;
      let status = document.querySelector("#status").checked;
      let content = document.querySelector("#content").value;
      console.log(typeof title, title);
      console.log(typeof status, status);
      console.log(typeof content, content);
      http
        .request({
          url: "/posts",
          method: "post",
          data: {
            title,
            content,
            status,
          },
        })
        .then((v) => {
          //   console.log(v);
          if (v.status >= 200 && v.status < 300) {
            alert("发布成功！");
            location.href = "./manage.html";
          }
        });
    };
    window.resetFn = function () {
      document.querySelectorAll("input").forEach((v) => {
        v.value = null;
        v.checked = false;
      });
    };
  </script>
</html>
